<template>
  <div class="root">
    <div class="header">
      <div class="title">入驻小区信息</div>
      <el-select
        v-model="value"
        size="mini"
        placeholder="请选择"
        @change="$emit('sort', value)"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="body">
      <el-table
        height="250px"
        :data="tableData"
        style="width: 100%"
        v-el-table-infinite-scroll="load"
        v-loading="areaTableLoadingStatus"
      >
        <el-table-column prop="area" label="小区名称" align="center">
        </el-table-column>
        <el-table-column prop="populations" label="人员总数" align="center">
        </el-table-column>
        <el-table-column prop="houses" label="房屋总数" align="center">
        </el-table-column>
        <el-table-column prop="parking" label="车位总数" align="center">
        </el-table-column>
        <el-table-column prop="shops" label="店铺总数" align="center">
        </el-table-column>
        <el-table-column prop="ad" label="投放广告总数" align="center">
        </el-table-column>
        <el-table-column prop="time" label="入驻时间" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import elTableInfiniteScroll from "el-table-infinite-scroll";

export default {
  name: "AreaTable",
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  components: {},
  props: {
    tableData: {
      type: Array,
    },
    areaTableLoadingStatus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [
        {
          value: 5,
          label: "按小区名称排序",
        },
        {
          value: 1,
          label: "按人员数排序",
        },
        {
          value: 3,
          label: "按房屋数排序",
        },
        {
          value: 2,
          label: "按车位数排序",
        },
        {
          value: 4,
          label: "按店铺排序",
        },
        {
          value: 6,
          label: "按入驻时间排序",
        },
      ],
      value: "",
    };
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    load() {
      // this.$message.success('加载下一页')
      // this.tableData = this.tableData.concat(this.tableData)
      this.$emit("load");
    },
  },
};
</script>

<style lang="scss" scoped>
.root {
  width: 75.6%;
  height: 408px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgb(191 191 191 / 75%);

  .header {
    display: flex;
    justify-content: space-between;
    padding: 28px 22px;

    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
